<template>
  <f7-page>
    <f7-navbar :title="$t('settings.mapType')" :back-link="$t('common.back')"></f7-navbar>
    <f7-list>
      <f7-list-item radio v-for="(type, index) in mapTypes" :title="type.label" v-show="type.enable" :value="type.value" name="mapType"  :checked="$store.state.map.type === type.value" @change="changeMap($event.target.value)"></f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import { getConfigMaps } from '@/api/api';
export default {
  data() {
			return {
          mapTypes:[]
			}
		},
 methods:{
   init(){
       getConfigMaps().then(data => {
         this.mapTypes = JSON.parse(data)
       });
   },
   changeMap(type){
     this.$store.dispatch('setMapValue',[{'key':'type','value':type}]);
     var map = {'type':type};
     localStorage.map = JSON.stringify(map);
     this.$f7.views.main.router.back();
   }
 },
  mounted() {
      this.init();
		},

}
</script>
